画像をゆっくりと表示させる
ブロードバンド接続が普及した現在では、ホームページ内の画像も瞬時に表示されます。しかし、ホームページの演出として画像をゆっくり表示させたい場合もあるでしょう。今回は、画像をゆっくり表示させると同時に「now loading...」や「complete!」という文字を表示させるテクニックを紹介します。

→ レイヤーを利用し、画像と情報表示窓を配置する
 
まずは、相対位置（position:relative）のレイヤーを作成し、その中に必要な要素を子レイヤーとして絶対位置（position:absolute）で配置します。ゆっくりと表示させる画像は、「IMG」タグに「position:absolute」のスタイルシートを追加し、位置を指定して配置します。続いて、画像と同じサイズ（400×300）で背景色が黒色の子レイヤーを画像の真上に重ねて配置します。これで、ページを開いた直後は画像が表示されなくなります。また、今回は情報を表示する窓を画像のすぐ下に配置します。このレイヤーは、幅を画像と同じサイズ、高さを可変（指定しない）とし、「now loading...」という文字を表示させておきます。
<DIV style="position:relative; top:0px; left:0px ; height:350px">

<IMG src="img01.jpg" style="position:absolute; left:0px; top:0px; z-index:1">

<DIV id="kakusu"
    style="position:absolute; left:0px; top:0px; z-index:2;
        width:400px; height:300px; background:#000000">
</DIV>

<DIV id="info"
    style="position:absolute; left:0px; top:300px; z-index:3;
        width:400px; background:#000000">
  <FONT color="#FFFFFF">now loading...</FONT>
</DIV>

</DIV>


→ 画像を表示させるJavaScript関数を呼び出す
 
続いては、ゆっくりと画像を表示させ、最後に「complete!」という文字を表示させるJavaScript関数「showpicture()」を呼び出します。このJavaScript関数は、ページを開くと同時に起動するので、「BODY」タグにonLoadイベントを追加して呼び出します。
<BODY onLoad="showpicture()">


→ JavaScriptを記述する
 
あとは、JavaScriptを記述すれば完成です。ここでは、画像を隠していた子レイヤー'kakusu'に以下のような処理を行うことで画像をゆっくりと表示させます。
  • 'kakusu'の位置（top）を1ピクセルずつ下に移動させる
  • 'kakusu'の高さ（height）を1ピクセルずつ小さくする
この処理にはif文を利用し、yy（'kakusu'の高さ）が0より大きい間は、yyの値を1ずつ小さくしながら'kakusu'の位置と高さを変更していきます。また「setTimeout()」を利用し、20/1000秒間隔で関数「showpicture()」を繰り返し実行させます。yyが0になったら、子レイヤー'info'内のHTMLを「complete!」という文字が表示されるように書き換えて、全ての処理を終了させます。
<SCRIPT language="JavaScript">
<!--

var yy=300;

function showpicture(){
  if(yy>0){
    yy=yy-1;
    document.getElementById('kakusu').style.top=300-yy;
    document.getElementById('kakusu').style.height=yy;
    setTimeout('showpicture()',20);
  }
  else{
    document.getElementById('info').innerHTML='<FONT color="#FFFFFF">complete!</FONT>';
  }
}

//-->
</SCRIPT>


�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I


�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��